<script>
  function get_orders(status) {
    $.get('/api/users/orders/?customer_id='+sessionStorage.getItem('customer_id')+'&status='+status, function (call) {
      var html = '';
      for (var i=0; i<call.length; i++){
          var create_at = new Date(call[i].create_time);
          var status = '';
          var order_id = call[i].id;
          var sn = call[i].p_sn;
          var o_status = call[i].status;
          var p_status = call[i].pmt_status;
          var d_status = call[i].dlr_status;
          var pay_btn = '';
//          if (o_status == 5 && p_status < 12) {
//            status = '客服已确认';
//          } else {
//            if (o_status == 5 && p_status < 13) {
//              status = '等待支付';
//              pay_btn = '<a href="/users/orders/'+call[i].id+'" class="fr honse">去支付</a>';
//            } else {
//              if (o_status == 10 && p_status == 13 && d_status < 40) {
//                status = '支付完成，等待发货';
//              } else {
//                if (d_status == 40) {
//                  status = '已发货';
//                  pay_btn = '<a href="/users/orders/'+call[i].id+'" class="fr honse">确认收货</a>';
//                } else {
//                  if (d_status == 90) {
//                    status = '订单已完成';
//                  } else {
//                    status = '等待客服确认';
//                  }
//                }
//              }
//            }
//          }
          if (o_status < 5) {
              status = '等待客服确认';
          }
          if (o_status == 5 && p_status <13) {
              status = '等待支付';
              pay_btn = '<a href="/users/orders/'+call[i].id+'" class="fr honse">去支付</a>';
          }
          if (o_status == 10 && p_status >= 13 && d_status < 40) {
              status = '支付成功，等待发货';
          }
          if (o_status == 10 && p_status >= 13 && d_status >=40) {
              status = '等待收货';
              pay_btn = '<a href="javascript:;" class="fr honse">确认收货</a>';
          }
          html += '<li><h2><span class="fl">'+create_at.toLocaleString()+'</span><i class="fr">'+status+'</i></h2><div class="p-one">'+
            '<a href="/users/orders/'+call[i].id+'"><div class="p-one-pic"><img src="http://auewe.oss-ap-southeast-2.aliyuncs.com/products/'+sn+'_thumb.jpeg"/></div>'+
            '<div class="p-one-text">'+call[i].order_spec_summary+'</div><div class="p-one-price"><span>$'+call[i].total_amount+'</span></div></a>'+
            '</div><div class="p-two"><div class="price fl">合计：<span>'+call[i].total_amount+'</span></div><div class="btn fr">'+pay_btn+
            '<a href="/users/orders/'+call[i].id+'" class="fr baise">订单查询</a></div></div></li>';
          }
          $('.product').html(html);
        })
      }

  function get_orders_by_status(status) {
    get_orders(status);
  }
</script>
<style>
  .current{
    color: red;
  }
</style>
<header class="mui-bar mui-bar-nav header">
  <h1 class="mui-title">我的订单</h1>
</header>
<div class="mui-content">
  <ul class="order-meun">
    <li class="current" onclick="get_orders_by_status('all')">
        <i class="iconfont">&#xe623;</i><br>
        <span>全部</span>
    </li>
    <li onclick="get_orders_by_status('pay')">
        <i class="iconfont">&#xe62b;</i><br>
        <span>待付款</span>
    </li>
    <li onclick="get_orders_by_status('deliver')">
        <i class="iconfont">&#xe61f;</i><br>
        <span>待发货</span>
    </li>
    <li onclick="get_orders_by_status('receive')">
        <i class="iconfont">&#xe64d;</i><br>
        <span>待收货</span>
    </li>
  </ul>
  <div class="h10"></div>
  <ul class="product">

  </ul>
</div>
<!--底部导航-->
<div class="jl"></div>
<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item" href="/">
    <span class="mui-icon "><i class="iconfont">&#xe601;</i></span>
    <span class="mui-tab-label">首页</span>
  </a>
  <a class="mui-tab-item" href="/list">
    <span class="mui-icon mui-icon-list"></span>
    <span class="mui-tab-label">列表</span>
  </a>
  <a class="mui-tab-item" href="/cart">
    <span class="mui-icon"><i class="iconfont">&#xe600;</i></span>
    <span class="mui-tab-label">购物车</span>
  </a>
  <a class="mui-tab-item mui-active" href="/account">
    <span class="mui-icon"><i class="iconfont">&#xe654;</i></span>
    <span class="mui-tab-label">我的</span>
  </a>
</nav>
<script>
  $(function () {
    var param_str = window.location.search;
    var params = param_str.split('=');
    if (params.length > 2) {
        var status_code = params[2];
        console.log(status_code);
        get_orders(status_code);
    } else {
        get_orders('all');
    }

    $('.order-meun li').click(function () {
      $(this).siblings('.current').removeClass('current');
      $(this).addClass('current');
    })
  })
</script>
<!--<script>-->
  <!--mui.init({-->
    <!--pullRefresh : {-->
      <!--container:".product",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等-->
      <!--endPullDown: true,-->
      <!--down : {-->
        <!--style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式-->
        <!--color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色-->
        <!--height:'50px',//可选,默认50px.下拉刷新控件的高度,-->
        <!--range:'100px', //可选 默认100px,控件可下拉拖拽的范围-->
        <!--offset:'0px', //可选 默认0px,下拉刷新控件的起始位置-->
        <!--auto: true,//可选,默认false.首次加载自动上拉刷新一次-->
        <!--callback : function () {-->
          <!--console.log('refresh');-->
          <!--mui('.mui-content').pullRefresh().endPulldownToRefresh();-->

        <!--}//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；-->
      <!--}-->
    <!--}-->
  <!--});-->
<!--</script>-->
